<div class="select-div">
    <div class="layui-inline">
        <label class="layui-form-label"> 角色名:</label>
        <div class="layui-input-inline">
            <input type="tel" name="name" id="name" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-inline margin-left-10">
        <button class="layui-btn layui-btn-primary margin-left-10" id="reload" >查询</button>
        <button class="layui-btn" id="addRole" >新增</button>
    </div>
</div>
<table id="roles" lay-filter="roles"></table>
<script>
    var layerAddRoleIndex ;
    var layerEditRoleIndex;
    //监听工具条
    $('#addRole').on('click',function () {
        var index = layer.open({
            type: 2,
            title: '添加用户',
            area: ['500px', '500px'], //宽高
            fix: false, //不固定
            maxmin: true,
            content: '/systemRole/toPage/systemRoleAdd'
        });
        layerAddRoleIndex = index;
    });

    $("#reload").on('click',function(){
        //这里以搜索为例
        var table = layui.table;
        table.reload('roles', {
            where: { //设定异步数据接口的额外参数，任意设
                name: $('#name').val()
            }
            ,page: {
                curr: 1 //重新从第 1 页开始
            }
        });
    })


    layui.use('table', function(){
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#roles',
            url: '/systemRole/getRoleList', //数据接口
            method: 'post',
            page: true, //开启分页
            cols: [[ //表头
                {field: 'id', title: 'ID', fixed: 'left'}
                ,{field: 'name', title: '名称' }
                ,{field: 'createTime', title: '创建时间',
                    templet: function(d){
                        return new Date(d.createTime).Format('yyyy-MM-dd hh:mm:ss');
                    }
                }
                ,{field: 'createTime', title: '修改时间',
                    templet: function(d){
                        return new Date(d.createTime).Format('yyyy-MM-dd hh:mm:ss');
                    }
                },
                {field:'right', title: '操作', width:177,toolbar:"#edit-resource"}
            ]]
        });


        //监听工具条
        table.on('tool(roles)', function(obj){
            var data = obj.data;
            if(obj.event === 'edit'){
                var index = layer.open({
                    type: 2,
                    title: '添加用户',
                    area: ['500px', '500px'], //宽高
                    fix: false, //不固定
                    maxmin: true,
                    content: "/systemResource/editResource?roleId="+data.id
                });
                layerEditRoleIndex = index;
            }else if(obj.event === 'delete'){
                layer.confirm('确定删除角色吗？该操作不可逆!', {
                    btn: ['确定','取消'] //按钮
                }, function(){
                    $.ajax({
                        type: "POST",
                        url: "/systemRole/deleteRole",
                        async:true,
                        data: {id:data.id},
                        success: function (data) {
                            if (data != null && data.code == 200) {
                                layer.msg('删除成功');
                                $("#reload").click();
                            } else {
                                layer.msg(data.msg);
                                return false;
                            }
                        }
                    })
                }, function(){

                });
            }
        });
    });
</script>
<script type="text/html" id="edit-resource">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
</script>